import React, { useState, useEffect } from 'react';
import { useSearchParams } from "react-router-dom";
import { LoadingOutlined, PlayCircleFilled } from '@ant-design/icons';
import { Spin } from 'antd';
import { indexSearch, indexCheckMusic } from '../../api/indexApi'

// 关键字染色
import { highlightSearchResult } from '../../math'
// 时间格式转换
import { formatTime, formatNumber } from '../../math'



const antIcon = (
    <LoadingOutlined
        style={{
            fontSize: 24,
        }}
        spin
    />
);

const playIcon = (<PlayCircleFilled
    style={{
        fontSize: 18,
        color: '#b3b3b3',
        padding: '10px'
    }}
/>
)

function Userprofiles() {
    const [searchpool, setSearchpool] = useState([]); // 保存搜索结果
    const [loading, setLoading] = useState([]); // 加载状态
    // 获取路由传递的搜索值参数
    const [searchParams] = useSearchParams();
    const s = searchParams.get('s');

    // 用户数据
    useEffect(() => {
        // console.log(s);
        if (s) {
            setLoading(true)
            indexSearch(s, '1002', 20)
                .then((res) => {
                    if (res.data.result.userprofiles.length > 0) {
                        setSearchpool(res.data.result.userprofiles)
                        // console.log(res.data.result.userprofiles);
                        setLoading(false)
                    } else {
                        setLoading(false)
                        setSearchpool([])
                    }
                })
                .catch((err) => {
                    console.error(err)
                    setLoading(false)
                })
        } else {
            setLoading(false)
        }
    }, [s]);



    // 查询音乐是否可用
    // async function checkMusic(value) {
    //     let a
    //     await indexCheckMusic(value).then((res)=>{
    //         a = res.data.success
    //     })
    //     return a
    // }

    return (
        <div className='searchusercontainer'>
            <div className='count'> 搜索"{s}",找到<span>{searchpool.length}</span>个用户</div>
            {
                loading ? (
                    <Spin indicator={antIcon} tip="Loading"><div className='loadingbox'></div></Spin>
                ) : (

                    searchpool.map((item) => {
                        // console.log(item)
                        return <li className='searchli' key={item.userId}>
                            {/* 头像 */}
                            <img className='avatar' title={item.name} src={item.avatarUrl}></img>

                            <div className='usermain'>
                                <div className='usermainTop'>
                                    {/* 用户名 */}
                                    <span title={item.nickname} className='nickname linka'><span className='linka'>{highlightSearchResult(item.nickname, s)}</span></span>
                                    {/* 用户身份图标 */}
                                    {
                                        item.avatarDetail ? (<img className='identityIcon' src={item.avatarDetail.identityIconUrl}></img>) : (<></>)
                                    }
                                    {/* 性别图标 */}
                                    {
                                        item.gender === 0 ? (<></>) : (item.gender === 1 ? (<img className='grandIcon' src={require('../../assets/images/sex_man.png')} />) : (<img className='grandIcon' src={require('../../assets/images/sex_woman.png')} />))
                                    }
                                </div>
                                {/* 用户签名 */}
                                <span className='signature'>{item.signature}</span>
                                <div className=''></div>
                            </div>
                            {/* 关注 */}
                            <button className='at'>+关注</button>
                        </li>
                    })
                )
            }
        </div>
    );
}

export default Userprofiles;